import React ,{Component} from 'react'
import style from './css/Shopping.css'
import style1 from './css/Detail.css'
import Size from './Size'
import Address from './address'
class Shopping extends  Component{
    constructor(props){
        super(props)
        this.state={
            On: 0,
            color:0,
            kc: 3330,
            bor11: style.color,
            bor22: style.color,
            bor1: style.size ,
            bor2: style.size ,
            bor3: style.size ,
            bor4: style.size
        }
    }
    colorChange(num){
        if(this.state.color==0){
            this.setState({color:num})
            if(num==1){this.setState({bor11: style.color2})}
            else {this.setState({bor22: style.color2})}
        }
        else if(this.state.color==num){
            this.setState({ color:0 })
            if(num==1){ this.setState({ bor11: style.color }) }
            else { this.setState({ bor22: style.color}) }
        }
        else{
            if(num==1){ this.setState({ bor11: style.color2 , bor22:style.color ,color:num}) }
            else { this.setState({ bor11: style.color , bor22:style.color2, color:num }) }
        }
    }
    sizeChange(num){
        if(this.state.On==0){
            if(num==1){ this.setState({ bor1: style.size2 ,On:1,kc:740 }) }
            else if(num==2){ this.setState({ bor2: style.size2 ,On:2,kc:782}) }
            else if(num==3){ this.setState({ bor3: style.size2 ,On:3,kc:879}) }
            else { this.setState({ bor4: style.size2 ,On:4,kc:929}) }
        }
        else if(this.state.On==num){
            this.setState({ On:0,kc:3330 })
            if(num==1){ this.setState({ bor1: style.size }) }
            else if(num==2){ this.setState({ bor2: style.size}) }
            else if(num==3){ this.setState({ bor3: style.size}) }
            else { this.setState({ bor4: style.size}) }
        }
        else{
            if(num==1){ this.setState({ bor1: style.size2 , bor2:style.size, bor3:style.size, bor4:style.size,On:1,kc:740}) }
            else if(num==2){ this.setState({ bor2: style.size2 , bor1:style.size, bor3:style.size, bor4:style.size,On:2,kc:782}) }
            else if(num==3){ this.setState({ bor3: style.size2, bor2:style.size, bor1:style.size, bor4:style.size ,On:3,kc:879}) }
            else { this.setState({ bor4: style.size2 , bor1:style.size, bor2:style.size, bor3:style.size,On:4,kc:929}) }
        }
    }
    Comment(){
        var h=document.getElementById(5);
        document.getElementById(1).className=style1.noselect;
        document.getElementById(2).className=style1.select;
        document.getElementById(3).className=style1.noselect;
        document.getElementById(5).style.display='block';
        document.getElementById(4).style.display='none';
        document.getElementById(6).style.display='none';
        document.getElementById(style1.tianchong).style.height=h.offsetHeight+'px';
    }
    amountSub(){
        var bt=document.getElementById(style.amo);
        if(bt.value!=0){
            bt.value--;
        }
    }
    amountAdd(){
        var bt=document.getElementById(style.amo);
        bt.value++;
    }
    render(){
        return(
            <div id={style.shopp}>
                <h3>Glad Youthful 日系 潮男休闲破洞牛仔裤 男士简约小脚裤TOP61</h3>
                <ul>
                    <li id={style.price}>价格
                        <div>
                            <strong>¥129.00</strong>
                        </div>
                        <a href="#1" onClick={this.Comment}>
                            <span className={style.cm}>3</span>
                            <span className={style.cn}>累计评论</span>
                        </a>
                    </li>
                    <li id={style.discount}>优惠
                        <div>
                            <img src="img\QQ截图20161212002114.png"/>
                            淘金币可抵<b>1.29</b>元<br/><br/>
                            <img src="img\QQ截图20161212002938.png"/>
                            1212满149减10,满249减20,满449减40,可跨店除预售 <a className={style.aa} href="#">抢券</a><br/><br/>
                            <img src="img\QQ截图20161212002226.png"/>
                            10元店铺红包，满10.01元可用 <a className={style.aa} href="#">领取</a>
                        </div>
                    </li>
                    <li id={style.deliver}>配送
                        <div>
                            浙江杭州 至 <Address />
                        </div>
                    </li>
                    <li id={style.Size}>尺码
                        <div>
                            <Size  click={this.sizeChange.bind(this,1)} On={this.state.bor1} size="M"/>
                            <Size  click={this.sizeChange.bind(this,2)} On={this.state.bor2}  size="L"/>
                            <Size  click={this.sizeChange.bind(this,3)} On={this.state.bor3}  size="XL" />
                            <Size  click={this.sizeChange.bind(this,4)} On={this.state.bor4}  size="XXL" />
                        </div>
                    </li>
                    <li id={style.aad}>颜色
                        <div  id={this.state.bor11} onClick={this.colorChange.bind(this,1)}>
                            <img src="img\TB1OcJwMXXXXXbjXFXXXXXXXXXX_!!0-item_pic.jpg" width="40" height="40" title="蓝色"/>
                        </div>
                        <div  id={this.state.bor22} onClick={this.colorChange.bind(this,2)}>
                            <img src="img/TB2QsDanpXXXXcYXpXXXXXXXXXX_!!207592.jpg" width="40" height="40" title="黑色" />
                        </div>
                    </li>
                    <li id={style.amount}>数量
                        <div>
                            <a id={style.sub_add} onClick={this.amountSub.bind(this)}>-</a>
                            <input type="text" id={style.amo}  defaultValue="1" maxLength="8"   title="请输入购买数量"/>
                            <a id={style.sub_add} onClick={this.amountAdd.bind(this)}>+</a>
                            件(库存{this.state.kc}件)
                        </div>
                    </li>
                </ul>
                <div>
                    <a id={style.buy} href="#">
                        立即购买
                    </a>
                    <a id={style.addd} href="#">
                        加入购物车
                    </a>
                </div>
            </div>

        )
    }
}

export default Shopping
